<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .input-line {
            width: 100%;
            justify-content: center;
            align-items: center;
            height: 0.28rem;
        }
        .input-div {
            width: 3.00rem;
            border-style:solid;
            border-bottom-width:0.01rem;
            border-color: #C7C8D1;
        }
        input {
            height: 0.28rem;
            font-size: 0.20rem;
            line-height: 0.28rem;
            color: #28354C;
        }
        input::-webkit-input-placeholder {
            color: #C4C5CE;
            font-size: 0.20rem;
            line-height: 0.28rem;
            font-weight: 200;
        }
        .password-eye-close{
            width: 0.22rem;
            height: 0.12rem;
            background-size: 0.22rem 0.12rem;
            background-image: url('../../image/login/closeEye.png');
        }
        .password-eye-open{
            width: 0.24rem;
            height: 0.16rem;
            background-size: 0.24rem 0.16rem;
            background-image: url('../../image/login/openEye.png');
        }
        #button {
            width: 2.97rem;
            height: 0.45rem;
            background-color: #D8D8D8;
            border-radius: 0.28rem;
            font-size: 0.15rem;
            line-height: 0.45rem;
            text-align: center;
            color: white;
        }
        .weixin{
            width: 0.32rem;
            height: 0.27rem;
            background-size: 0.32rem 0.27rem;
            background-image: url('../../image/login/weixin.png');
        }
    </style>
</head>
<body>
    <div class="flex" style="width: 100%; height: 100%; flex-direction: column; justify-content: space-between; align-items: center;">
        <div style="width: 100%;">
            <div id="header" style="width: 100%; height: 0.78rem"></div>
            <div style="width: 100%;">
                <p style="font-size: 0.20rem; color: #28354C; font-weight: 600; margin-left: 0.38rem">登录</p>
            </div>
            <div class="flex input-line" style="margin-top: 0.45rem">
                <div class="input-div">
                    <input id="phone" style="width: 3.00rem;" type="tel" placeholder="请输入您的手机号" oninput="changeButton()">
                </div>
            </div>
            <div class="flex input-line" style="margin-top: 0.42rem">
                <div class="flex input-div" style="justify-content: space-between; align-items: center;">
                    <input id="password" style="width: auto;" type="password" placeholder="请输入密码" oninput="changeButton()">
                    <div id="password-eye" class="password-eye-close" tapmode onclick="changeEye(this)"></div>
                </div>
            </div>
            <div class="flex" style="width: 100%; justify-content: center; margin-top: 0.60rem;">
                <div id="button" tapmode onclick="openMain()">
                    登录
                </div>
            </div>
            <div class="flex" style="justify-content: space-between; align-items: center; margin-top: 0.20rem">
                <p style="font-size: 0.14rem; color: #7C7272; margin-left: 0.39rem" tapmode onclick="openRegisterWin()">立即注册</p>
                <p style="font-size: 0.14rem; color: #7C7272; margin-right: 0.39rem" tapmode onclick="openSetPasswordWin()">找回密码</p>
            </div>
        </div>
        <div style="width: 100%;">
            <div class="flex" style="width: 100%; justify-content: center">
                <div class="weixin"></div>
            </div>
            <div id="footer" style="width: 100%; height: 0.44rem"></div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var phoneEl, passwordEl, buttonEl;
    apiready = function () {
        $api.fixStatusBar( $api.byId('header') );
        $api.fixTabBar($api.byId('footer'));
        exitApp();

        phoneEl = $api.byId('phone');
        passwordEl = $api.byId('password');
        buttonEl = $api.byId('button');
    }

    //改变按钮颜色
    function changeButton() {
        if (phoneEl.value.length == 11 && passwordEl.value.length >= 6) {
            $api.css(buttonEl,'background-color: #A0522C;');
        } else {
            $api.css(buttonEl,'background-color: #D8D8D8;');
        }
    }

    function changeEye(el) {
        if ($api.attr($api.prev(el),'type') == "password") {
            $api.removeCls(el, 'password-eye-close');
            $api.addCls(el, 'password-eye-open');
            $api.attr($api.prev(el),'type','text');
        } else {
            $api.removeCls(el, 'password-eye-open');
            $api.addCls(el, 'password-eye-close');
            $api.attr($api.prev(el),'type','password');
        }
    }

    function openRegisterWin() {
        api.openFrame({
            name: 'registerFrame',
            url: './registerFrame.html',
            bgColor: '#ffffff',
            vScrollBarEnabled: false, //是否显示垂直滚动条
            hScrollBarEnabled: false, //是否显示水平滚动条
            // slidBackEnabled: true, //是否支持滑动返回
            // slidBackType: 'edge', //滑动返回类型：full、edge
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }

    function openSetPasswordWin() {
        api.openFrame({
            name: 'setPasswordFrame',
            url: './setPasswordFrame.html',
            bgColor: '#ffffff',
            vScrollBarEnabled: false, //是否显示垂直滚动条
            hScrollBarEnabled: false, //是否显示水平滚动条
            // slidBackEnabled: true, //是否支持滑动返回
            // slidBackType: 'edge', //滑动返回类型：full、edge
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }

    //打开主页或登录页
    function openMain() {
        if (phoneEl.value.length == 11 && passwordEl.value.length >= 6) {
            var temApiHeader = {
                "Content-Type": "application/json",
            };
            api.ajax({
                url: apiUrl + '/user/login',
                tag: '/user/login',
                method: 'post',
                headers: temApiHeader,
                data: {
                    body: {
                        device_id: api.deviceId,
                        phone: phoneEl.value,
                        password: passwordEl.value,
                    }
                }
            }, function(ret, err) {
                // api.alert({ msg: JSON.stringify(ret) });
                // api.alert({ msg: JSON.stringify(err) });
                if (ret) {
                    if (ret.code == 0) {
                        $api.setStorage('token', ret.data['token']);
                        getIMInfo(ret.data['token']);
                        api.sendEvent({
                            name: 'reloadMain',
                        });
                        api.openWin({
                            name: 'main',
                            url: '../main.html',
                            bgColor: '#ffffff',
                            vScrollBarEnabled: false, //是否显示垂直滚动条
                            hScrollBarEnabled: false, //是否显示水平滚动条
                            slidBackEnabled: false,
                            animation: {
                                type: 'none',
                                duration: 0
                            }
                        });
                    } else {
                        api.toast({
                            msg: ret.err_msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                } else {
                    // api.alert({ msg: JSON.stringify(err) });
                }
            });
        }
    }

    function getIMInfo(token) {
        api.ajax({
            url: apiUrl + '/user/info',
            tag: '/user/info',
            method: 'get',
            data: {
                values: {
                    token: token,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var userInfo = ret.data;
                    $api.setStorage('im_user_id', userInfo['im_user_id']);
                    $api.setStorage('im_pwd', userInfo['im_pwd']);

                    console.info(JSON.stringify(userInfo));
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>
